<template>
  <!-- 上拉图标 -->
  <span class="shangla" @tap="goTop" v-show="topStatus">
    <img style="height:120%;width:120%;" src="static/img/shangla.png"/>
  </span>
</template>
<script>
	import mui from 'static/js/mui'
  export default {
    data() {
      return {
        topStatus: false,
        }
    },
    props: {},
    watch: {
    },
    components:{
    },
    methods: {
      goTop() {
        //兼容性写法
        mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,0);
        this.topStatus = false;
      }
    },
    created() {
    },
    destroyed () { 

    },
    mounted () {
      //绑定scroll开始事件
      let that = this
      document.querySelector('.mui-scroll-wrapper').addEventListener('scrollstart', function (e) {
        if(mui('.mui-scroll-wrapper').scroll().y < -100){
          that.topStatus = true;
        }else{
          that.topStatus = false;
        }
      });
    },
  };

</script>
<style lang="scss" scoped>
/* 上拉图标 */
.shangla{
  position: absolute;
  bottom:80px;
  right:20px;
  width:40px;
  height:40px;
  z-index:50;
}
</style>